<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>订餐系统</title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" href="css/1.css">
    <link rel="stylesheet" href="css/build/css/layui.css">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript">
        !function () {
            var htmlEl = document.getElementsByTagName('html')[0];
            var fitPage = function () {
                /* The calculate of with from zepto  */
                var w = htmlEl.getBoundingClientRect().width;
                w = Math.round(w);
                w = w > 750 ? 750 : w;
                var newW = w / 750 * 100;
                htmlEl.style.fontSize = newW + 'px';
            }
            fitPage();
            var t;
            var func = function () {
                clearTimeout(t);
                t = setTimeout(fitPage, 25);
            }
            window.addEventListener('resize', func);
        }();
    </script>

</head>
<body>
<header class="dc-header dc-header-fixed">

    <div class="dc-header-box" style="background: url('images/dc-1-1.png');background-size: cover">
        <div class="dc-shop-title">
            <h2 class="dc-header-shopName">想要每餐都吃得健康?</h2>
            <div class="dc-header-delivery">
                <span class="dc-sub-title-one">请花1分钟回答几个小问题吧</span><br/><span
                    class="dc-sub-title-two">(仅适合正常非孕期健康成年人)</span>
            </div>
        </div>
        <div class="dc-header-right">
            <a href="#">跳过>></a>
        </div>
    </div>

</header>


<section class="dc-content layui-form">
    <div class="dc-1-content" style="margin-top: 0rem;">
        <div class="dc-1-box dc-first">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">现在有减肥计划吗?</span>
            <span class="dc-content-title-right layui-form-item">
                <div class="layui-input-block">
                        <input type="checkbox" name="open" lay-skin="switch" lay-text="有|无">
                </div>
            </span>
        </div>
    </div>

    <div class="dc-1-content list-1 dc-seconde">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">每月的减肥大计是?</span>
            <span class="dc-content-title-right"><span class="red">0</span>&nbsp;kg/月</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <input type="range" name="points" id="points" value="10" min="0" max="100" data-show-value="false">
                <div class="gradient" style="width: 10%">

                </div>
                <!--<div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>-->
            </div>

        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">性别</span>
            <span class="dc-content-title-right layui-form-item">
                <div class="layui-input-block">
                        <input type="checkbox" name="close" lay-skin="switch" lay-text="男|女">
                </div>
            </span>
        </div>
    </div>
    <div class="dc-1-content list-2">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">年龄</span>
            <span class="dc-content-title-right"><span class="red">28</span>&nbsp;岁</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="false">
                <div class="gradient">

                </div>
                <!--<div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>-->
            </div>
        </div>
    </div>
    <div class="dc-1-content list-3">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">体重</span>
            <span class="dc-content-title-right"><span class="red">50</span>&nbsp;kg</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <input type="range" name="points" id="points" value="33.5" min="0" max="100" data-show-value="false">
                <div class="gradient">

                </div>
                <!--<div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>-->
            </div>
        </div>
    </div>
    <div class="dc-1-content list-4">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">身高</span>
            <span class="dc-content-title-right"><span class="red">160</span>&nbsp;cm</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <input type="range" name="points" id="points" value="64" min="0" max="100" data-show-value="false">
                <div class="gradient">

                </div>
                <!--<div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>-->
            </div>
        </div>
    </div>
    <div class="dc-1-content list-5">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">体力活动</span>
            <span class="dc-content-title-right"><span class="red">轻体力</span>&nbsp;活动</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div>
                <div class="gradient-box">
                    <input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="false">
                    <div class="gradient">
                    </div>
                    <!--<div class="gradient-box-btn">
                        <div class="gradient-box-btn-inner"></div>
                    </div>-->

                </div>
            </div>

            <span class="dc-content-sub-title-note">PS:工作时经常走动</span>
        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box" style="clear:both;height: auto;overflow: hidden;">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title" style="display: block;">慢病</span>
            <hr class="dc-1-box-line"/>
            <span class="dc-content-title-right layui-form-item" style="display: block;margin-left: 0rem;width: 100%;margin-top: 0.1rem;padding-bottom: 0rem;">
                <div class="layui-input-block" style="margin-left: 0rem;clear: both">
                  <input type="checkbox" name="like[write]" title="糖尿病糖尿病糖尿病糖">
                  <input type="checkbox" name="like[read]" title="高血脂">
                  <input type="checkbox" name="like[game]" title="高血压">
                  <input type="checkbox" name="like[ceshi]" title="运动">
                  <input type="checkbox" name="like[ceshi]" title="运动">
                  <input type="checkbox" name="like[ceshi]" title="运动">
                  <input type="checkbox" name="like[ceshi]" title="运动">
                  <input type="checkbox" name="like[game]" title="高血压">
                    <input type="checkbox" name="like[write]" title="糖尿病糖尿病糖尿病糖">
                  <input type="checkbox" name="like[read]" title="高血脂">
                  <input type="checkbox" name="like[game]" title="高血压">
                </div>
            </span>
        </div>
    </div>
    <div class="dc-1-content dc-1-bottom-btn">
        确定
    </div>
</section>

<script>
    $(function () {
        $("input[name=points]").hide()
        $(".ui-loader").hide()
        $(".ui-slider-handle").wrap("<div class='gradient-box-bt'></div>")
        $(".layui-form-item .layui-form-checkbox").css({
            'float': 'left'
        })

    })
    function jisuan(cls) {
        var rwidth = $(cls + " .gradient-box").css("width")
        var width = $(cls + " .ui-slider-track a").css("left")
        var owidth = $(cls + " .ui-slider-track a").css("width")

        var tt = parseInt(rwidth.replace("px", '')) - parseInt(owidth.replace("px", ''))
        if (parseInt(width.replace("px", '')) > tt) {
            $(cls + " .ui-slider-track a").css("left", tt)
        }
        var count_5 = $(cls + " .ui-slider-track a").attr("title")
        count_5 = parseInt(count_5)
        var c
        if (cls == '.list-1') {

            var yu = count_5 % 10 / 10
            if (yu == 0.5 || yu == 0.6 || yu == 0.7 || yu == 0.3 || yu == 0.4) {
                yu = 0.5
            } else if (yu == 0.1 || yu == 0.2) {
                yu = 0
            } else if (yu == 0.8 || yu == 0.9) {
                yu = 1
            }
            $(".dc-seconde .red").text((count_5 - count_5 % 10) / 10 + yu)
        }
        if (cls == ".list-3") {

            $(".list-3 .red").text(Math.floor(150 * count_5 / 100))
        }
        if (cls == ".list-4") {

            $(".list-4 .red").text(Math.floor(250 * count_5 / 100))
        }
        if (cls == ".list-5") {
            if (count_5 <= 25) {
                c = '极轻体力劳动'
            } else if (count_5 > 25 && count_5 < 50) {
                c = '轻体力劳动'
            } else if (count_5 >= 50 && count_5 <= 75) {
                c = '中体力劳动'
            } else {
                c = '重体力劳动'
            }
            $(".list-5 .red").text(c)
        }
        if (cls == '.list-2') {

            $(".list-2 .red").text(Math.floor(80 * count_5 / 100))
        }
        count_5 = parseInt(count_5) + 5

        $(cls + " .gradient").css({"width": count_5 + "%"})
        var ls = parseInt($(cls + " .gradient").css("width").replace("px", ""))
        var lbox = parseInt($(cls + " .gradient-box").css("width").replace("px", ""))
        if (ls > lbox) {
            $(cls + " .gradient").css("width", lbox)
        }
    }
    function func() {
        var first_val = $(".dc-first").find('.layui-form-switch').text()
        if (first_val == '有') {
            if (tag == true) {
                $(".dc-seconde .ui-slider-handle").css("left", "10%")
                $(".dc-seconde .ui-slider-handle").attr("title", "10")
                $(".dc-seconde .gradient").css("width", "10%")
                $(".dc-seconde .red").text(1)
                tag = false
            }
            var tt = parseInt($(".dc-seconde .red").text())
            if (tt < 1) {
                $(".dc-seconde .ui-slider-handle").css("left", "10%")
                $(".dc-seconde .ui-slider-handle").attr("title", "10")
                $(".dc-seconde .gradient").css("width", "10%")
                $(".dc-seconde .red").text(1)
            }
            var tt = $(".dc-seconde .gradient").css("width")
            jisuan(".list-1")
        } else {
            tag = true
            $(".dc-seconde .ui-slider-handle").css("left", "0%")
            $(".dc-seconde .ui-slider-handle").attr("title", "0")
            $(".dc-seconde .gradient").css("width", "0%")

        }
        var l3 = parseInt($(".list-3 .red").text())
        jisuan(".list-2")
        jisuan(".list-3")
        jisuan(".list-4")
        jisuan(".list-5")

    }
    $(function () {
        setInterval(func, 50)
        $(".list-3 .red").text(50)
    })
</script>
<script src="css/build/lay/dest/layui.all.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        $(".layui-form-switch").css("margin-top", 0)


    });
</script>
</body>
</html>